<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num1">
        <select v-model="operate">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="num2" />
        =
        <input disabled type="text" v-model="result">
        <br/>
        <input type="button" value="计算结果" @click="calc" />

    </div>

    <script>
        var vue = new Vue({
            el : "#app",
            data :{
                num1 : '0',
                num2 : '0',
                result : '0',
                operate : '+'
            },
            methods:{
                calc(){
                    if(this.operate == null) return;
                    if(this.operate == '/'){
                        if(this.num2 == 0){
                            return;
                        }
                    }
                    var codeStr = 'parseInt(this.num1)' + this.operate + 'parseInt(this.num2)';
                    this.result = eval(codeStr);


                   /* switch (this.operate) {
                        case "+":{
                            this.result = parseInt(this.num1) + parseInt(this.num2);
                        }break;
                        case "-":{
                            this.result = parseInt(this.num1) - parseInt(this.num2);
                        }break;

                        case "*":{
                            this.result = parseInt(this.num1) * parseInt(this.num2);
                        }break;
                        case "/":{
                            this.result = parseInt(this.num1) / parseInt(this.num2);
                        }break;
                    }*/
                }
            }
        });
    </script>
</body>
</html>